<template>
  <div class="demo-app">
    <el-dialog
      :center="true"
      :modal="false"
      :title="name+'工作安排明细'"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="viewData">
        <el-table-column property="planDate" label="日期" width="150"></el-table-column>
        <el-table-column property="projectName" label="项目名称" width="200"></el-table-column>
        <el-table-column property="workType" label="工作事项" width="200"></el-table-column>
        <el-table-column property="planTask" label="计划工作内容"></el-table-column>
      </el-table>
    </el-dialog>
    <el-row style="margin-top: 20px;">
      <el-col :span="15">
        <el-date-picker
          v-model="dates"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <el-button
          style="margin-left: 10px;"
          @click="clickDate"
          type="primary"
          icon="el-icon-thumb"
        >查询</el-button>
        <el-button @click="refresh" type="info" icon="el-icon-refresh-right">刷新</el-button>
      </el-col>
    </el-row>
    <el-row style="padding-top: 20px;">项目成员总人数：{{persons}}人,未安排工作总天数{{sum}}天</el-row>
    <div style="margin-top: 20px;">
      <el-table
        ref="tableref"
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        height="400"
      >
        <el-table-column fixed width="80" type="index" label="序号" align="center"></el-table-column>
        <el-table-column fixed label="姓名" width="200" align="center">
          <template slot-scope="scope">
            <el-link @click="link(scope.row.user_id,scope.row.user_name)" type="primary">
              <i class="el-icon-view el-icon--right"></i>
              {{scope.row.user_name}}
            </el-link>
            <el-link @click="clickplan(scope.row.user_id)" type="primary">
              <i class="el-icon-edit-outline"></i>安排
            </el-link>
          </template>
        </el-table-column>
        <el-table-column fixed label="缺少安排天数" width="200" align="center">
          <template slot-scope="scope">
            <font
              :style="scope.row.lack > 0?'font-size: 15;color: red;':'font-size: 15;color: green;'"
            >
              <b>{{scope.row.lack}}</b>
            </font>
          </template>
        </el-table-column>
        <template v-for="key in Object.keys(tableData[0]).sort()">
          <el-table-column
            v-if="key !='lack' && key !='user_id'&& key !='user_name'"
            :key="key"
            :label="key"
            :prop="key"
            align="center"
            width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <slot
                v-if="key.slot"
                :name="scope.column.property"
                :row="scope.row"
                :$index="scope.$index"
              />
              <span v-else>
                <font
                  :style="scope.row[scope.column.property] == 0?'font-size: 15;color: red;':'font-size: 15;color: blue;'"
                >{{scope.row[scope.column.property]==0?'未安排':'已安排'}}</font>
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <el-divider>
      <i class="el-icon-s-open"></i>只能浏览前后一月时间范围的计划安排喔~~~
    </el-divider>
  </div>
</template>
<script>
import request from "@/utils/request";
import _ from "lodash";
import { export_json_to_excel } from "@/utils/Export2Excel";
export default {
  components: {},
  created() {
    this.projectId = this.$attrs.projectId;
    this.getData(this.dates, this.projectId);
  },
  data: function () {
    return {
      projectId: null,
      name: "",
      dialogTableVisible: false,
      viewData: [{}],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate(time) {
          let now = new Date();
          var now1 = now.setDate(now.getDate() - 30);
          var now2 = now.setDate(now.getDate() + 60);
          return time < now1 || time > now2;
        },
      },
      persons: null,
      sum: null,
      dates: null,
      dayNum: null,
      //表格数据
      tableData: [{}],
      loading: null,
    };
  },
  methods: {
    clickplan(val) {
      this.$root.openModal("/eip/project/plan", null, {
        userId: val,
        projectId: this.projectId,
      });
    },
    link(val, name) {
      this.name = name;
      var strings = null;
      if (this.dates != null) {
        strings = this.dates.toString();
      }
      request({
        url: "/eip/plan/getViewDataX",
        method: "get",
        params: { userId: val, dates: strings, projectId: this.projectId },
      })
        .then((r) => {
          if (r.success) {
            this.dialogTableVisible = true;
            this.viewData = r.parameters.data;
          } else {
            this.viewData = [{}];
            this.$message.error(r.message || "数据请求失败");
          }
        })
        .catch((e) => {
          this.msgError(e || "数据请求失败");
        });
    },
    refresh() {
      this.dates = null;
      this.getData(this.dates, this.projectId);
    },
    clickDate() {
      if (this.dates == null) {
        this.getData(this.dates, this.projectId);
      } else {
        this.getData(this.dates.toString(), this.projectId);
      }
    },
    //根据当前时间获取上下周的信息
    getData(date, projectId) {
      this.loading = true;
      request({
        url: "/eip/plan/getAssistX",
        method: "get",
        params: { time: date, projectId: projectId },
      })
        .then((r) => {
          if (r && !r.message) {
            if (r.success) {
              this.loading = false;
              this.tableData = r.parameters.data;
              this.persons = r.parameters.persons;
              this.sum = r.parameters.sum;
              this.dayNum = r.parameters.dayNum;
            } else {
              this.sum = 0;
              this.persons = 0;
              this.dayNum = 0;
              this.tableData = [{}];
              this.$message(r.message);
            }
            //解决fixed导致的布局错乱
            this.$nextTick(() => {
              this.$refs.tableref.doLayout();
            });
          } else {
            this.$message.error(r.message || "数据请求失败");
          }
        })
        .catch((e) => {
          this.msgError(e || "数据请求失败");
        });
    },
  },
};
</script>

<style lang='css' scoped>
</style>
 